Pure.CSS একটি লাইটওয়েট এবং কমপ্যাক্ট CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সহজে স্টাইলিং করার জন্য ব্যবহৃত হয়। Grids এবং Layouts হল Pure.CSS-এর অন্যতম গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে সহজে রেসপন্সিভ এবং ফ্লেক্সিবল লেআউট তৈরি করতে সাহায্য করে।
1. Pure.CSS Grid System
Pure.CSS এর গ্রিড সিস্টেম হল একটি flexbox-ভিত্তিক লেআউট সিস্টেম, যা আপনাকে কাস্টম কলাম এবং রো তৈরি করতে সক্ষম করে। Pure.CSS-এ গ্রিড সিস্টেম খুবই সহজ এবং ব্যবহারযোগ্য।
Grid System Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Example</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-grid {
margin: 0 auto;
}
.pure-u-1-2 {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<div class="pure-g custom-grid">
<div class="pure-u-1-2">
<h2>Left Column</h2>
<p>This is the left side of the grid.</p>
</div>
<div class="pure-u-1-2">
<h2>Right Column</h2>
<p>This is the right side of the grid.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-g: গ্রিড কন্টেইনারের জন্য ব্যবহৃত হয়, যা সবগুলো কলামকে একত্রে সাজাতে সাহায্য করে।pure-u-1-2: গ্রিডের প্রতিটি উপাদান (কলাম) আকারের 50% প্রদর্শন করবে, অর্থাৎ দুইটি সমান কলাম তৈরি হবে।
এটি একটি 2 কলাম লেআউট তৈরি করবে যেখানে প্রতিটি কলাম 50% প্রস্থ নিয়ে থাকবে।
2. Responsive Grids with Pure.CSS
Pure.CSS এর গ্রিড সিস্টেমটি responsive হতে পারে, যা বিভিন্ন স্ক্রীন সাইজে অ্যাডজাস্ট হয়। Responsive grid ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশন বা ওয়েবসাইট স্বয়ংক্রিয়ভাবে ছোট স্ক্রীন (যেমন মোবাইল ডিভাইস) বা বড় স্ক্রীন (যেমন ডেস্কটপ) এর জন্য উপযুক্ত লেআউট প্রদর্শন করবে।
Responsive Grid Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Responsive Grid</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-u-1-3 {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<h3>Column 1</h3>
<p>This column takes full width on small screens and 1/3 width on medium screens and up.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<h3>Column 2</h3>
<p>This column takes full width on small screens and 1/3 width on medium screens and up.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<h3>Column 3</h3>
<p>This column takes full width on small screens and 1/3 width on medium screens and up.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-u-1: ছোট স্ক্রীনে (মোবাইল ডিভাইসে) প্রতিটি কলাম পুরো প্রস্থ নিবে (100% width)।pure-u-md-1-3: মিডিয়াম স্ক্রীন (ডেস্কটপ) এবং বড় স্ক্রীনে, প্রতিটি কলাম 1/3 প্রস্থ নিবে।
এটি একটি 3 কলাম গ্রিড তৈরি করবে যা মোবাইলে পুরো প্রস্থে দেখাবে এবং ডেস্কটপে 1/3 প্রস্থে ভাগ হবে।
3. Using Layouts in Pure.CSS
Pure.CSS আপনাকে বিভিন্ন layout তৈরির জন্য সহজে কাস্টম ক্লাস প্রদান করে। আপনি ফ্লেক্সিবল এবং রেসপন্সিভ লেআউট তৈরির জন্য গ্রিড সিস্টেম ব্যবহার করতে পারেন।
Flexbox Layout with Pure.CSS Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Flexbox Layout</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.flex-item {
background-color: #3498db;
color: white;
padding: 10px;
width: 30%;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Flexbox লেআউটের জন্য
display: flexএবংjustify-contentব্যবহার করা হয়েছে, যাতে ফ্লেক্স কন্টেইনারের আইটেমগুলি সুষমভাবে স্থাপন হয়। width: 30%দিয়ে প্রতিটি ফ্লেক্স আইটেমকে 30% প্রস্থে সীমাবদ্ধ করা হয়েছে, এবং তাদের মধ্যে স্পেস তৈরি করতেjustify-content: space-betweenব্যবহার করা হয়েছে।
এটি একটি ফ্লেক্সবক্স লেআউট তৈরি করবে, যেখানে তিনটি আইটেমের মধ্যে সমান পরিসরের গ্যাপ থাকবে।
4. Advanced Grid Layout with Pure.CSS
Pure.CSS-এ আপনি আরও কাস্টম গ্রিড লেআউট তৈরি করতে পারেন, যেমন nested grids এবং variable-width grids।
Nested Grid Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Nested Grid</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.nested-grid {
background-color: #f4f4f4;
padding: 20px;
}
.nested-item {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2 nested-grid">
<div class="nested-item">Nested Grid Item 1</div>
<div class="nested-item">Nested Grid Item 2</div>
</div>
<div class="pure-u-1-2">
<h3>Main Grid Item</h3>
<p>This is a nested grid within a column.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Nested Grid: একটি গ্রিডের মধ্যে আরেকটি গ্রিড (nested grid) ব্যবহার করা হয়েছে, যেখানে দুটি আইটেম রয়েছে। এগুলির জন্য আপনি
pure-u-1-2এবং অন্যান্য গ্রিড কনফিগারেশন ব্যবহার করতে পারেন।
Pure.CSS-এর গ্রিড এবং লেআউট সিস্টেমটি ব্যবহার করে আপনি সহজেই রেসপন্সিভ এবং ফ্লেক্সিবল ওয়েব পেজ ডিজাইন করতে পারবেন। Grid System আপনাকে বিভিন্ন কলাম এবং রো তৈরি করতে সহায়তা করে, এবং Flexbox Layout দিয়ে আপনি এলিমেন্টগুলিকে আরো সুষমভাবে সজ্জিত করতে পারবেন। এগুলি ওয়েব অ্যাপ্লিকেশন ও ওয়েবসাইটে বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হবে।
Pure.CSS এর Responsive Grid System এবং Column Creation আপনাকে সহজেই রেসপন্সিভ ওয়েব লেআউট ডিজাইন করতে সাহায্য করে। Pure.CSS এর গ্রিড সিস্টেমের মাধ্যমে আপনি একটি ফ্লেক্সিবল এবং রেসপন্সিভ লেআউট তৈরি করতে পারবেন যা বিভিন্ন স্ক্রীন সাইজে ভালভাবে কাজ করবে। এখানে Pure.CSS এর গ্রিড সিস্টেম এবং কলাম তৈরি করার বিস্তারিত আলোচনা করা হলো।
Pure.CSS Responsive Grid System
Pure.CSS-এ Grid System একটি ফ্লেক্সিবল এবং সিম্পল সিস্টেম যা আপনাকে ১২ কলামের লেআউট তৈরি করতে সাহায্য করে। আপনি এই গ্রিড সিস্টেমটি ব্যবহার করে রেসপন্সিভ ওয়েব পেজ তৈরি করতে পারেন, যেটি বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে অ্যাডজাস্ট হবে। গ্রিড সিস্টেমের সিঙ্ক্রোনাইজেশন খুব সহজ এবং আপনি প্রয়োজন অনুসারে কলামগুলিকে বিভক্ত করতে পারেন।
1. Basic Grid Structure
Pure.CSS-এ Grid System তৈরি করতে হলে, আপনি .pure-g ক্লাস ব্যবহার করবেন, এবং কলামের জন্য .pure-u-{size} ক্লাস ব্যবহার করতে হবে।
এটি ১২ কলামের গ্রিড সিস্টেম অনুসরণ করে, যেখানে .pure-u-1-12 একটি কলাম, .pure-u-2-12 দুটি কলাম ইত্যাদি নির্দেশ করে।
Basic Grid Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Grid System</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Column 1 (50% width)</p>
</div>
<div class="pure-u-1-2">
<p>Column 2 (50% width)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: এই ক্লাসটি গ্রিড সিস্টেমের জন্য ব্যবহৃত হয়।.pure-u-1-2: এটি কলামকে ৫০% প্রস্থ দেয়, অর্থাৎ দুইটি কলামকে সমান আকারে ভাগ করবে।
2. Responsive Grid System
Pure.CSS এর গ্রিড সিস্টেম রেসপন্সিভ এবং অ্যাডজাস্টেবল। এটি বিভিন্ন স্ক্রীন সাইজে স্বয়ংক্রিয়ভাবে লেআউট পরিবর্তন করতে সাহায্য করে। আপনি .pure-u-* ক্লাসের মাধ্যমে বিভিন্ন প্রস্থের জন্য কলাম তৈরি করতে পারেন এবং প্রতিটি স্ক্রীনে কলামগুলির রূপান্তর করতে পারেন।
Responsive Grid Example (Different Column Sizes for Different Screen Widths):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Responsive Grid Example</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 1 (100% width on small, 50% on medium, 25% on large)</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 2 (100% width on small, 50% on medium, 25% on large)</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 3 (100% width on small, 50% on medium, 25% on large)</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 4 (100% width on small, 50% on medium, 25% on large)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-u-1: ছোট স্ক্রীনে (প্রথমে মোবাইল ভিউ) এটি পূর্ণ প্রস্থ (100%) কলাম প্রদান করবে।.pure-u-md-1-2: মিডিয়াম স্ক্রীনে এটি ৫০% প্রস্থ কলাম প্রদান করবে।.pure-u-lg-1-4: বড় স্ক্রীনে এটি ২৫% প্রস্থ কলাম প্রদান করবে।- এটি রেসপন্সিভ গ্রিড সিস্টেমের একটি উদাহরণ, যেখানে আপনার কলামগুলো স্ক্রীনের আকার অনুযায়ী আউটপুট হবে।
3. Nested Grids (Nested Columns)
Pure.CSS এর গ্রিড সিস্টেমে আপনি নেস্টেড গ্রিড তৈরি করতে পারেন, অর্থাৎ এক কলামের ভিতরে আরেকটি গ্রিড তৈরি করা সম্ভব।
Nested Grid Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Nested Grid</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Column 1 (50% width)</p>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Nested Column 1 (50% width)</p>
</div>
<div class="pure-u-1-2">
<p>Nested Column 2 (50% width)</p>
</div>
</div>
</div>
<div class="pure-u-1-2">
<p>Column 2 (50% width)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে প্রথম কলামে nested grid তৈরি করা হয়েছে, যাতে দুটি ছোট কলাম রয়েছে।
- প্রতিটি নেস্টেড কলামের জন্য
.pure-u-1-2ক্লাস ব্যবহার করা হয়েছে, যাতে এটি ৫০% প্রস্থ নেয়।
4. Column Offsets
Pure.CSS গ্রিড সিস্টেমে আপনি offsets ব্যবহার করতে পারেন, যার মাধ্যমে আপনি কলামকে শিফট করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি লেআউটে কিছু স্পেস বা গ্যাপ তৈরি করতে চান।
Column Offset Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Column Offset</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-4">
<p>Column 1 (25% width)</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4">
<p>Column 2 (offset by 25%)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-u-1-4প্রথম কলামটির জন্য ২৫% প্রস্থ।.pure-u-1-2দ্বিতীয় কলামটির জন্য ৫০% প্রস্থ, এবং.pure-u-md-1-4এটি ২৫% প্রস্থ হয়ে যাবে।
5. Grid Class for Containers
Pure.CSS গ্রিড সিস্টেমের জন্য আপনি containers ব্যবহার করতে পারেন, যাতে আপনি আপনার গ্রিড সিস্টেমের প্রতিটি অংশ কাস্টমাইজ করতে পারেন। .pure-g ক্লাস ব্যবহারের মাধ্যমে পুরো গ্রিডকে রেন্ডার করা হয় এবং .pure-u-{size} ব্যবহার করে কলাম তৈরি হয়।
Pure.CSS এর Responsive Grid System এবং Column Creation খুবই সহজ এবং ব্যবহারকারী-বান্ধব। এর মাধ্যমে আপনি দ্রুত এবং কার্যকরী ওয়েব লেআউট তৈরি করতে পারেন। গ্রিড সিস্টেমের মাধ্যমে আপনি কাস্টম সাইজের কলাম তৈরি করতে পারেন, এবং রেসপন্সিভ ডিজাইন তৈরি করতে পারলে ওয়েবসাইটটি সব ধরনের ডিভাইসে সুন্দরভাবে কাজ করবে। Nested grids, offsets, এবং responsive columns সহ গ্রিড সিস্টেমের সব সুবিধা ব্যবহার করে আপনি খুবই প্রফেশনাল লেআউট তৈরি করতে পারবেন।
Pure.CSS এর Nested Grids এবং Offset এর মাধ্যমে আপনি সহজেই একটি রেসপন্সিভ এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারেন। Grid System Pure.CSS-এ একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে কলাম ভিত্তিক লেআউট ডিজাইন করতে সাহায্য করে। এই সিস্টেমে আপনি pure-g (গ্রিড কন্টেইনার) এবং pure-u-1-x (গ্রিড আইটেমের জন্য কলাম সাইজ) ক্লাস ব্যবহার করে লেআউট তৈরি করতে পারেন।
এখানে Nested Grids এবং Offset ব্যবহার করার বিস্তারিত উদাহরণ দেওয়া হলো।
1. Nested Grids in Pure.CSS
Nested Grids ব্যবহারের মাধ্যমে আপনি একাধিক গ্রিড কন্টেইনার তৈরি করতে পারেন যা অন্য গ্রিডের ভিতরে থাকে। এটি একটি কলাম ভিত্তিক লেআউট তৈরি করার জন্য ব্যবহৃত হয় যেখানে একাধিক স্তরের গ্রিড থাকতে পারে।
Example: Nested Grids
<div class="pure-g">
<!-- First Level Grid -->
<div class="pure-u-1-2">
<h3>Column 1 - First Level</h3>
<div class="pure-g">
<!-- Nested Grid Inside Column 1 -->
<div class="pure-u-1-2">
<p>Nested Column 1 - Second Level</p>
</div>
<div class="pure-u-1-2">
<p>Nested Column 2 - Second Level</p>
</div>
</div>
</div>
<div class="pure-u-1-2">
<h3>Column 2 - First Level</h3>
<p>This is the second-level content of column 2</p>
</div>
</div>
ব্যাখ্যা:
- প্রথম স্তরের গ্রিড কন্টেইনার
pure-gক্লাসের মাধ্যমে তৈরি হয়েছে, এবং তার মধ্যে দুটি কলাম রয়েছে (প্রতিটি কলামের সাইজpure-u-1-2, অর্থাৎ ৫০% প্রস্থ)। - প্রথম কলামের মধ্যে একটি nested grid তৈরি করা হয়েছে, যেখানে দুইটি সাব-কলাম রয়েছে। এটি
pure-gক্লাসের মাধ্যমে তৈরি এবং তার মধ্যেpure-u-1-2ব্যবহার করা হয়েছে, যাতে প্রতিটি কলাম ৫০% প্রস্থ নেয়।
ফলস্বরূপ:
- প্রথম স্তরের গ্রিড দুটি কলাম থাকবে, এবং প্রথম কলামের ভিতরে একটি সাব-গ্রিড থাকবে যা দুটি কলামে বিভক্ত হবে। এটি একটি Nested Grid লেআউট তৈরি করবে।
2. Offset in Pure.CSS
Offset এর মাধ্যমে আপনি একটি গ্রিড আইটেমকে একটি নির্দিষ্ট দিক থেকে সরিয়ে নিয়ে আসতে পারেন, যা গ্রিড সিস্টেমের মধ্যে ফাঁকা স্থান তৈরি করতে ব্যবহৃত হয়। Pure.CSS-এ pure-u-offset-x ক্লাস ব্যবহার করে আপনি একটি নির্দিষ্ট সংখ্যক কলাম সরাতে পারেন।
Example: Using Offset
<div class="pure-g">
<div class="pure-u-1-3">
<p>Column 1 - 1/3 width</p>
</div>
<div class="pure-u-1-3 pure-u-offset-1-3">
<p>Column 2 - 1/3 width with offset</p>
</div>
<div class="pure-u-1-3">
<p>Column 3 - 1/3 width</p>
</div>
</div>
ব্যাখ্যা:
- প্রথম কলাম
pure-u-1-3ক্লাসের মাধ্যমে ১/৩ অংশ জায়গা নিয়েছে। - দ্বিতীয় কলামেও
pure-u-1-3ক্লাস রয়েছে, তবে এটিতেpure-u-offset-1-3ক্লাস যোগ করা হয়েছে, যা কলামটিকে ১/৩ অংশ ডান দিকে সরিয়ে দিয়েছে। এর ফলে দ্বিতীয় কলামটি বাকি কলামগুলির থেকে ১/৩ জায়গা ফাঁকা রেখে চলে যাবে।
ফলস্বরূপ:
- দ্বিতীয় কলামটি প্রথম কলাম থেকে ১/৩ অংশ সরানো হয়েছে এবং ৩টি কলাম একটি নিখুঁত সমানভাবে বিভক্ত হয়ে যায়, যেখানে দ্বিতীয় কলামটি বাকি কলামগুলির সাথে সমন্বিত হতে থাকে, তবে এর জন্য এক্সট্রা অফসেট থাকবে।
3. Combination of Nested Grids and Offset
আপনি Nested Grids এবং Offset একত্রিত করে আরও জটিল এবং সুন্দর লেআউট তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে প্রথম স্তরের গ্রিডে একটি নেস্টেড গ্রিড রয়েছে এবং দ্বিতীয় স্তরের গ্রিডে offset ব্যবহার করা হয়েছে।
Example: Nested Grids with Offset
<div class="pure-g">
<div class="pure-u-1-2">
<h3>Column 1 - First Level</h3>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-offset-1-2">
<p>Nested Column 1 - Second Level with Offset</p>
</div>
</div>
</div>
<div class="pure-u-1-2">
<h3>Column 2 - First Level</h3>
<p>This is the second-level content of column 2</p>
</div>
</div>
ব্যাখ্যা:
- এখানে প্রথম স্তরের গ্রিডে
pure-u-1-2ক্লাস দিয়ে দুটি কলাম তৈরি করা হয়েছে। - প্রথম কলামের মধ্যে একটি Nested Grid রয়েছে, এবং দ্বিতীয় কলামে
pure-u-offset-1-2ক্লাস ব্যবহার করা হয়েছে, যাতে এটি প্রথম কলামটির থেকে ৫০% ডানে চলে যায়।
ফলস্বরূপ:
- দ্বিতীয় কলামটি প্রথম কলামের সাথে সমান্তরাল হতে থাকলেও, প্রথম কলামের ভিতরের নেস্টেড গ্রিডটিকে ৫০% সরানো হবে।
Pure.CSS এর Nested Grids এবং Offset সিস্টেম দিয়ে আপনি খুবই সহজে এবং কার্যকরভাবে ওয়েব পেজের লেআউট তৈরি করতে পারেন। Nested Grids ব্যবহারের মাধ্যমে আপনি একাধিক স্তরের গ্রিড তৈরি করতে পারেন, যা আরও জটিল লেআউট তৈরি করতে সহায়তা করে। এছাড়া Offset এর মাধ্যমে আপনি গ্রিড আইটেমগুলির মধ্যে ফাঁকা স্থান তৈরি করতে পারেন এবং তাদের স্থান পরিবর্তন করতে পারেন।
এই দুটি বৈশিষ্ট্য আপনাকে আরও ফ্লেক্সিবল এবং রেসপন্সিভ ওয়েব লেআউট ডিজাইন করতে সাহায্য করবে, যা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে কাজ করবে।
Pure.CSS একটি ছোট, দ্রুত, এবং লাইটওয়েট সিএসএস ফ্রেমওয়ার্ক, যা রেসপন্সিভ এবং মোডুলার ডিজাইন তৈরি করতে সহায়ক। এটি fixed layout এবং fluid layout উভয় ধরনের লেআউট সাপোর্ট করে। এখানে আমরা দেখব কিভাবে Pure.CSS ব্যবহার করে Fixed Layout এবং Fluid Layout তৈরি করা যায়।
1. Fixed Layout in Pure.CSS
Fixed Layout এমন একটি লেআউট যেখানে সাইটের কন্টেন্টের প্রস্থ নির্দিষ্ট একটি মানে স্থির থাকে, অর্থাৎ স্ক্রীনের সাইজ বা রেজোলিউশন যাই হোক না কেন, কন্টেন্টের প্রস্থ একই থাকে। এটি সাধারণত width এর মান নির্দিষ্ট করে তৈরি করা হয়।
Fixed Layout Example with Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fixed Layout with Pure.CSS</title>
<style>
.container {
width: 960px; /* Fixed width */
margin: 0 auto; /* Center align */
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fixed Layout Example</h1>
</header>
<section>
<p>This is a fixed layout where the content width is fixed to 960px.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
.containerক্লাসেwidth: 960px;ব্যবহার করা হয়েছে, যার ফলে টেবিল বা কন্টেন্টের প্রস্থ 960px-এ সীমাবদ্ধ থাকবে।margin: 0 auto;ব্যবহার করা হয়েছে যাতে কন্টেন্টটি কেন্দ্রস্থলে অ্যালাইন করা থাকে।
এটি একটি Fixed Layout, যেটি সব স্ক্রীনে 960px প্রস্থে স্থির থাকবে এবং আপনি স্ক্রীন সাইজ পরিবর্তন করলে এটি ঠিকই মাঝখানে অবস্থান করবে।
2. Fluid Layout in Pure.CSS
Fluid Layout হল এমন একটি লেআউট যেখানে কন্টেন্টের প্রস্থ percentage-based হয়, অর্থাৎ স্ক্রীনের সাইজ বা রেজোলিউশন অনুযায়ী কন্টেন্টের প্রস্থ পরিবর্তিত হয়। এটি responsive লেআউট হিসেবে খুব জনপ্রিয়।
Fluid Layout Example with Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fluid Layout with Pure.CSS</title>
<style>
.container {
width: 80%; /* Fluid width */
margin: 0 auto; /* Center align */
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fluid Layout Example</h1>
</header>
<section>
<p>This is a fluid layout where the content width adjusts based on the viewport width.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
.containerক্লাসেwidth: 80%;ব্যবহার করা হয়েছে, যার ফলে কন্টেন্টের প্রস্থ পেজের ৮০% হবে। এটি স্ক্রীন সাইজ পরিবর্তিত হওয়ার সাথে সাথে কন্টেন্টের প্রস্থ পরিবর্তন করবে, অর্থাৎ একটি fluid (নমনীয়) লেআউট তৈরি হবে।margin: 0 auto;ব্যবহার করা হয়েছে যাতে কন্টেন্টটি এখনও কেন্দ্রস্থলে অ্যালাইন থাকে।
এই Fluid Layout স্ক্রীন সাইজ অনুযায়ী কন্টেন্টের প্রস্থ পরিবর্তিত হয়। ছোট স্ক্রীনে এটি অনেকটা বড় দেখাবে, এবং বড় স্ক্রীনে এটি ছোট হয়ে যাবে, তবে সর্বদা স্ক্রীনের ৮০% প্রস্থে থাকবে।
3. Fixed Layout with Fluid Elements in Pure.CSS
এখন আমরা Fixed Layout এবং Fluid Elements-এর একটি সংমিশ্রণ দেখব, যেখানে পুরো লেআউট Fixed থাকবে কিন্তু কিছু উপাদান (যেমন কলাম বা ইমেজ) fluid থাকবে।
Example: Fixed Layout with Fluid Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fixed Layout with Fluid Elements</title>
<style>
.container {
width: 960px; /* Fixed width */
margin: 0 auto;
}
.content {
width: 100%; /* Fluid content */
background-color: #f4f4f4;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fixed Layout with Fluid Elements</h1>
</header>
<section class="content">
<p>This section has a fluid width that adjusts with the viewport width, while the overall layout stays fixed.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
.containerক্লাসটি 960px স্থির প্রস্থের সাথে ফিক্সড লেআউট তৈরি করেছে।.contentক্লাসটিwidth: 100%;ব্যবহার করেছে, যা পুরো প্রস্থে fluid এবং viewport এর আকার অনুযায়ী পরিবর্তিত হয়।
এটি একটি Fixed Layout যেখানে কন্টেন্টের প্রধান অংশটি fluid হয়ে থাকে এবং স্ক্রীনের সাইজ পরিবর্তন হলেও কন্টেন্টের প্রস্থ পরিবর্তিত হয়।
4. Using Pure.CSS Grid System for Layout
Pure.CSS এ Grid System ব্যবহার করে আপনি আরও উন্নত এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারেন। এটি কেবলমাত্র একটি ফিক্সড অথবা ফ্লুইড লেআউট নয়, বরং অনেক বিভিন্ন কলাম এবং গ্রিড কাঠামো তৈরি করতে সাহায্য করে।
Grid Layout Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Grid Layout with Pure.CSS</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3">Column 1</div>
<div class="pure-u-1-3">Column 2</div>
<div class="pure-u-1-3">Column 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: এটি গ্রিডের কন্টেইনার, যা কলামগুলোর মধ্যে ব্যবধান তৈরি করে।.pure-u-1-3: এটি প্রতিটি কলামকে ১/৩ অংশ করে দেয়। এটি ফ্লেক্সিবল, এবং স্ক্রীন সাইজ পরিবর্তন হলে কলামগুলির আকারও পরিবর্তিত হবে।
Pure.CSS ব্যবহার করে Fixed Layout এবং Fluid Layout তৈরি করা খুবই সহজ এবং দ্রুত। আপনি যদি একটি fixed width চান, তবে একটি fixed layout ব্যবহার করুন, আর যদি স্ক্রীন সাইজ অনুযায়ী লেআউট পরিবর্তন করতে চান, তবে fluid layout ব্যবহার করুন। এর পাশাপাশি, Pure.CSS Grid System ব্যবহার করে আপনি আরও জটিল এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারবেন।
Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক, যা বিভিন্ন লেআউট তৈরির জন্য সরল ও কার্যকরী টুলস প্রদান করে। Flexbox এবং Grid হল দুটি শক্তিশালী CSS লেআউট মডেল, যা Pure.CSS-এর মধ্যে ব্যবহার করা যেতে পারে এবং এটি ওয়েব পেজের লেআউটগুলিকে আরও রেসপন্সিভ এবং উপযুক্ত করে তোলে।
1. Flexbox Layout in Pure.CSS
Flexbox (Flexible Box Layout) হল একটি CSS লেআউট মডেল যা উপাদানগুলির মধ্যে স্থান ভাগাভাগি এবং তাদের সঠিকভাবে সজ্জিত করতে সহায়ক। Flexbox এর সাহায্যে আপনি খুব সহজেই ওয়েব পেজের কন্টেন্টের স্থান সংরক্ষণ, এ্যালাইনমেন্ট এবং বিন্যাস করতে পারেন। Pure.CSS এ Flexbox ব্যবহারের জন্য কোনও অতিরিক্ত ফ্রেমওয়ার্ক সেটআপ প্রয়োজন হয় না, কারণ এটি CSS এর মৌলিক অংশ হিসেবে সহজেই ব্যবহৃত হয়।
Flexbox Layout উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Flexbox Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Flexbox container */
.flex-container {
display: flex;
justify-content: space-between; /* Distribute items with space between */
align-items: center; /* Align items vertically in the center */
padding: 10px;
background-color: #f4f4f4;
}
/* Flex items */
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: flex: কন্টেইনারে Flexbox সক্রিয় করতে ব্যবহার করা হয়।justify-content: space-between: উপাদানগুলির মধ্যে গ্যাপ তৈরি করতে ব্যবহৃত হয়। এটি এক্স-অ্যাক্সিসে উপাদানগুলিকে সমানভাবে ছড়িয়ে দেয়।align-items: center: উপাদানগুলিকে Y-অ্যাক্সিসে কেন্দ্রীয়ভাবে সজ্জিত করার জন্য ব্যবহৃত হয়।flex: 1: প্রতিটি উপাদান সমানভাবে প্রস্থ গ্রহণ করবে।
2. Grid Layout in Pure.CSS
Grid Layout হল একটি CSS লেআউট মডেল, যা ওয়েব পেজের কন্টেন্টকে সারি এবং কলামে সাজানোর জন্য ব্যবহৃত হয়। Grid এর সাহায্যে আপনি ওয়েব ডিজাইনে অনেক বেশি নিয়ন্ত্রণ পাবেন এবং এটি রেসপন্সিভ লেআউট তৈরি করতে সহায়ক।
Grid Layout উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
gap: 10px; /* Space between grid items */
}
/* Grid items */
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: grid: কন্টেইনারে গ্রিড লেআউট সক্রিয় করতে ব্যবহার করা হয়।grid-template-columns: repeat(3, 1fr): তিনটি সমান কলাম তৈরি করতে ব্যবহৃত হয়, যেখানে1frমানে প্রতিটি কলাম সমান আকারে থাকবে।gap: 10px: গ্রিড আইটেমগুলির মধ্যে 10px গ্যাপ তৈরি করতে ব্যবহৃত হয়।
3. Grid Optimization in Pure.CSS
Grid লেআউট ব্যবহার করা হয় বিশেষত যখন আপনাকে একটি কন্টেইনারে একাধিক উপাদান সাজাতে হয়। Pure.CSS এ Grid লেআউটের জন্য pure-g এবং pure-u-* ক্লাস রয়েছে, যা গ্রিড সিস্টেমকে কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
Grid Optimization উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Optimization</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pure-g {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
gap: 15px;
}
.pure-u-1-2 {
grid-column: span 2; /* Each item will span 2 columns */
}
.pure-u-1 {
grid-column: span 1; /* Span 1 column */
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 grid-item">Item 1</div>
<div class="pure-u-1 grid-item">Item 2</div>
<div class="pure-u-1-2 grid-item">Item 3</div>
<div class="pure-u-1-2 grid-item">Item 4</div>
<div class="pure-u-1 grid-item">Item 5</div>
<div class="pure-u-1 grid-item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
grid-template-columns: repeat(4, 1fr): এখানে ৪টি কলাম তৈরি করা হয়েছে।pure-u-1-2: কিছু আইটেমকে ২টি কলামে বিস্তৃত করা হয়েছে (যেমন Item 3 এবং Item 4)।pure-u-1: অন্যান্য আইটেম একক কলামে রাখা হয়েছে।
4. Flexbox এবং Grid এর সংমিশ্রণ
Pure.CSS-এ Flexbox এবং Grid এর সংমিশ্রণ ব্যবহার করে আপনি আরও শক্তিশালী এবং কাস্টমাইজযোগ্য লেআউট তৈরি করতে পারবেন।
উদাহরণ: Flexbox এবং Grid সংমিশ্রণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox and Grid Combination</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.grid-item, .flex-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
</div>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে একটি Grid কন্টেইনার এবং একটি Flexbox কন্টেইনার তৈরি করা হয়েছে। Flexbox এবং Grid একে অপরের সাথে মিশিয়ে আপনি আরও আরও কাস্টমাইজড এবং রেসপন্সিভ লেআউট তৈরি করতে পারবেন।
Pure.CSS ফ্রেমওয়ার্ক ব্যবহার করে Flexbox এবং Grid লেআউট তৈরি করা সহজ এবং কার্যকর। আপনি এগুলিকে রেসপন্সিভ লেআউট তৈরিতে ব্যবহার করতে পারেন এবং স্ক্রীন সাইজের উপর নির্ভর করে কন্টেন্টের প্রদর্শন পরিবর্তন করতে পারেন। Pure.CSS এর গ্রিড এবং ফ্লেক্স সিস্টেম আপনাকে আপনার ওয়েব ডিজাইনকে আরও সুন্দর এবং কার্যকরী করতে সাহায্য করে।
Read more
